import { createDraw } from '@/utils/Draw.js'
import { ref, reactive, onMounted, onBeforeMount } from 'vue'

export default function (map) {
  let drawSource = ref({})
  let drawLayer = ref({})
  let draw = ref({})
  onBeforeMount(() => {
    drawSource.value = new ol.source.Vector({
      wrapX: false,
    })
    let source = drawSource.value
    drawLayer.value = new ol.layer.Vector({
      source,
    })
  })
  const addDraw = ({ type, callback }) => {
    map.value.removeInteraction(draw.value)
    draw.value = createDraw({
      type,
      drawSource,
      callback,
    })
    map.value.addInteraction(draw.value)
  }
  const removeDraw = () => {
    map.value.removeInteraction(draw.value)
  }
  return { drawLayer, drawSource, addDraw, removeDraw }
}
